<template>
  <div class="container">
    <div class="header">
      <div class="hd">
        <div class="logo">
          <span class="comName"><h2>管理平台</h2></span>
        </div>
        <div class="userInfo">
          <Badge dot>
            <Avatar shape="square" style="background-color: #87d068" icon="person" size="small" />
          </Badge>
        </div>
        <ul class="nav">
          <li :class="{ active: item.isActive }" v-for="item in nav" :key="item.name" @click="menuClick(item)">
            <!--<svg class="icon" aria-hidden="true">
                <use :xlink:href="'#icon-'+item.icon"></use>
            </svg>-->
            {{item.name}}
          </li>
        </ul>
      </div>
      
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transitionName: 'slide-left',
      nav: [
        { name: "应用", icon: "yingyong", routerName: "yy", isActive:true },
        { name: "人群", icon: "duixiangdongtaiguankong", routerName: "rq", isActive:false },
        { name: "云盘", icon: "jintian", routerName: "yp", isActive:false },
        { name: "统计", icon: "tongji1", routerName: "tj", isActive:false },
        { name: "搜索", icon: "sousuo", routerName: "ss", isActive:false }
      ]
    };
  },
  methods: {
    menuClick(item) {
      this.nav.forEach(item => {
        item.isActive = false;
      });
      item.isActive = true;

      this.$router.push("/" + item.routerName);
    }
  }
};
</script>

<style scoped>

.header .hd {
  background-color: #3c7ce6;
  height: 40px;
  padding: 0px 20px;
  position: relative;
}
.comName{
  float: left;
  height: 40px;
  line-height: 40px;
  color: #FFF;
  letter-spacing: 3px;
}
.userInfo{
  float: right;
  line-height: 37px;
}
.header .nav {
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -155px;
}
.header .nav li {
  float: left;
  font-size: 16px;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  color: rgba(255,255,255,.5);
  font-weight: bold;
  width: 70px;
  text-align: center;
  position: relative;
  margin: 0px 5px;
}
.header .nav li:hover,
.header .nav li:hover .icon{
  color: rgba(255,255,255,1);
}
.header .nav li.active{
  color: rgba(255,255,255,1);
  border-bottom: 3px solid rgba(255,255,255,1);
}
.main{
  height: 100%;
  margin-top: -40px;
  padding-top: 40px;
}
</style>
